<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML编辑器 - 微信公众号HTML插件</title>
    <link rel="stylesheet" href="editor.css">
</head>
<body>
    <div class="editor-container">
        <div class="editor-header">
            <div class="header-left">
                <div class="logo">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97c0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1c0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"/>
                    </svg>
                </div>
                <h1>HTML编辑器</h1>
            </div>
            <div class="header-right">
                <button class="header-btn" id="save-btn">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path d="M17 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V7L17 3M19 19H5V5H16.17L19 7.83V19M12 12C10.34 12 9 13.34 9 15S10.34 18 12 18 15 16.66 15 15 13.66 12 12 12M6 6H15V10H6V6Z"/>
                    </svg>
                    保存
                </button>
                <button class="header-btn secondary" id="close-btn">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/>
                    </svg>
                    关闭
                </button>
            </div>
        </div>

        <div class="editor-toolbar">
            <div class="toolbar-section">
                <label>文件操作:</label>
                <button class="toolbar-btn" id="new-btn">
                    <svg viewBox="0 0 24 24" width="14" height="14">
                        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                    </svg>
                    新建
                </button>
                <button class="toolbar-btn" id="open-btn">
                    <svg viewBox="0 0 24 24" width="14" height="14">
                        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                    </svg>
                    打开
                </button>
                <input type="file" id="file-input" accept=".html,.htm" style="display: none;">
            </div>
            
            <div class="toolbar-section">
                <label>插入:</label>
                <button class="toolbar-btn" id="insert-template-btn">
                    <svg viewBox="0 0 24 24" width="14" height="14">
                        <path d="M5,3A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5M5,5H19V19H5V5Z"/>
                    </svg>
                    模板
                </button>
                <button class="toolbar-btn" id="insert-svg-btn">
                    <svg viewBox="0 0 24 24" width="14" height="14">
                        <path d="M5,3A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5M5,5H19V19H5V5Z"/>
                    </svg>
                    SVG
                </button>
            </div>

            <div class="toolbar-section">
                <label>设置:</label>
                <label class="checkbox-label">
                    <input type="checkbox" id="auto-convert-check" checked>
                    <span class="checkmark"></span>
                    自动转换
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="live-preview-check" checked>
                    <span class="checkmark"></span>
                    实时预览
                </label>
            </div>
        </div>

        <div class="editor-content">
            <div class="editor-panel">
                <div class="panel-header">
                    <h3>HTML代码</h3>
                    <div class="panel-actions">
                        <button class="action-btn" id="format-btn">格式化</button>
                        <button class="action-btn" id="clear-btn">清空</button>
                    </div>
                </div>
                <div class="editor-area">
                    <textarea id="html-editor" placeholder="在此输入HTML代码..."></textarea>
                </div>
            </div>

            <div class="preview-panel">
                <div class="panel-header">
                    <h3>实时预览</h3>
                    <div class="panel-actions">
                        <button class="action-btn" id="refresh-preview-btn">刷新</button>
                        <button class="action-btn" id="fullscreen-btn">全屏</button>
                    </div>
                </div>
                <div class="preview-area">
                    <iframe id="preview-frame" src="about:blank"></iframe>
                </div>
            </div>
        </div>

        <div class="editor-footer">
            <div class="footer-left">
                <div class="status-info">
                    <span id="char-count">字符数: 0</span>
                    <span id="line-count">行数: 1</span>
                </div>
            </div>
            <div class="footer-right">
                <button class="footer-btn primary" id="insert-to-wechat-btn">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                    </svg>
                    插入到微信
                </button>
                <button class="footer-btn secondary" id="copy-code-btn">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/>
                    </svg>
                    复制代码
                </button>
            </div>
        </div>
    </div>

    <!-- 模板选择模态框 -->
    <div class="modal" id="template-modal">
        <div class="modal-overlay">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>选择模板</h3>
                    <button class="modal-close">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="template-grid" id="template-grid">
                        <!-- 模板列表将在这里动态生成 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- SVG编辑模态框 -->
    <div class="modal" id="svg-modal">
        <div class="modal-overlay">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>SVG编辑器</h3>
                    <button class="modal-close">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="svg-editor-container">
                        <div class="svg-input-section">
                            <label for="svg-upload">上传SVG文件:</label>
                            <input type="file" id="svg-upload" accept=".svg">
                            <textarea id="svg-code" placeholder="或直接粘贴SVG代码..."></textarea>
                        </div>
                        <div class="svg-preview-section">
                            <label>预览:</label>
                            <div id="svg-preview"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="modal-btn secondary" id="svg-cancel">取消</button>
                        <button class="modal-btn primary" id="svg-insert">插入SVG</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="editor.js"></script>
</body>
</html> 